<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*.box{
				width:582px;
				margin:0px auto;
			}*/
			.shuishui{
				outline: none;
			}
			.pic img{
				width: 50px;
				height: 50px;
				border-radius:50% ;
				vertical-align: middle;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix{
				display: table;
				content: "";
				clear:both;
			}
			#fabiao{
				margin: 20px 0px;
			}
			.text{
				height: 68px;
				margin-left: 10px;
			}
			.name{
				margin-bottom: 10px;
			}
			.ss{
				border: 1px solid #ccc;
				padding: 10px;
				width:582px;
				box-sizing: border-box;
				display: none;
				opacity:0 ;
				margin-bottom: 20px;
			}
			.cnt{
				width:562px;
			}
			.del{
				cursor: pointer;
			}
			span{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<textarea cols="80" rows="10" id="shuishui"></textarea><br />
			<input type="button" value="发表" id="fabiao"/>
			<div class="ss" id="ss1">
				<div class="clearfix">
					<div class="pic fl">
						<img src="4.jpg"/>
					</div>	
					<div class="fr text">
						<div class="name">轩诗旎</div>
						<div id="time">2018-1-8</div>
					</div>
				</div>
				<div class="clearfix">
					<div class="cnt">斯是陋室，惟吾德馨</div>
					<div class="fr">
						<span >赞</span><span class="del" >删除</span><span>转发</span>
					</div>
				</div>
			</div>
		</div>
		<script>
			var oldss;
			for(var i=100;i<=145;i++){
				document.write("<img src='http://qzonestyle.gtimg.cn/qzone/em/recommendedImages/"+i+"_thumb.gif'/>");
			}
			fabiao.onclick=function(){
				ss1.getElementsByClassName("cnt")[0].innerHTML=shuishui.value;
				var ss=ss1.cloneNode(true);
				 ss.getElementsByClassName("del")[0].onclick = function(){
            var deletedNode = this.parentNode.parentNode.parentNode;
			setTimeout(function(){
				deletedNode.opacity=0;
				deletedNode.style="0px";
				steTimeout(function(){
				 deletedNode.parentNode.removeChild(deletedNode);	
				},200)
			},100)
			};
				ss.id="";
				ss.style.display="block";
				setTimeout(function(){
					ss.style.opacity=1;
				},100)
				shuishui.value="";
				if(document.getElementsByClassName("ss").length>1){
					document.body.insertBefore(ss,oldss);
				}else{
					document.body.appendChild(ss);
				}
				oldss=ss;
			}
			
			
			
		</script>
	</body>
</html>
